const postcssRootValue = 192;

const useStyles = (styles: string | Partial<CSSStyleDeclaration>) => {
    if (typeof styles === 'string') {
        return styles;
    }

    let result = '';
    for (const key in styles) {
        const valueNum = /(\d+)px/g.exec(`${styles[key]}`)?.[1];
        let remValue = '';
        if (valueNum) {
            remValue = `${parseFloat(valueNum) / postcssRootValue}rem`;
        }
        const value = /\d+px/g.test(`${styles[key]}`) ? remValue : styles[key];
        result += `${key.replaceAll(/(\S)([A-Z])/g, '$1-$2').toLocaleLowerCase()}: ${value};`;
    }

    return result;
};

export default useStyles;
